<template>
  <div class="space-y-4">
    <div class="flex items-center justify-between p-4 bg-background-800 rounded-xl border border-background-700">
      <div>
        <h3 class="text-text-primary font-medium">显示 AI 生成内容标识</h3>
        <p class="text-text-secondary text-sm mt-1">在电影卡片上显示 AI 生成内容的标识</p>
      </div>
      <label class="relative inline-flex items-center cursor-pointer">
        <input 
          type="checkbox" 
          v-model="showAiLabel" 
          @change="onToggleShowAiLabel"
          class="sr-only peer"
        />
        <div class="w-11 h-6 bg-background-600 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-primary-500/20 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary-600"></div>
      </label>
    </div>

    <div class="flex items-center justify-between p-4 bg-background-800 rounded-xl border border-background-700">
      <div>
        <h3 class="text-text-primary font-medium">屏蔽 AI 内容</h3>
        <p class="text-text-secondary text-sm mt-1">开启后不展示由 AI 生成的用户和电影内容</p>
      </div>
      <label class="relative inline-flex items-center cursor-pointer">
        <input 
          type="checkbox" 
          v-model="filterAiContent" 
          @change="onToggleFilterAi"
          class="sr-only peer"
        />
        <div class="w-11 h-6 bg-background-600 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-primary-500/20 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary-600"></div>
      </label>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useUiStore } from '../../store/useUiStore'

const uiStore = useUiStore()
const showAiLabel = ref(true)
const filterAiContent = ref(false)

const onToggleShowAiLabel = () => {
  uiStore.showAiLabel = showAiLabel.value
}

const onToggleFilterAi = () => {
  uiStore.filterAiContent = filterAiContent.value
}

onMounted(() => {
  showAiLabel.value = uiStore.showAiLabel
  filterAiContent.value = uiStore.filterAiContent
})
</script>